<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Detalhes do Cliente
        </ui:define>

        <ui:define name="content">

            <h:form id="visualizarClienteForm">

                <div class="actions">

                    <div id="buttons">

                        <p:button value="Editar" outcome="criarCliente.xhtml"
                                  icon="ui-icon-pencil"
                                  styleClass="ui-priority-primary">
                            <f:param value="#{ managerPesquisarPessoa.pessoaVisualizar.id }" name="pessoaId"/>
                        </p:button>

                        <p:button value="Pesquisar" outcome="pesquisarCliente.xhtml" icon="ui-icon-search"
                                  styleClass="ui-priority-primary botao_pesquisar" />

                        <p:commandButton value="Excluir" styleClass="botao_excluir" oncomplete="deletarClienteDialog.show()" icon="ui-icon-trash">
                            <f:setPropertyActionListener target="#{ managerPesquisarPessoa.pessoaDeletar }" value="#{ managerPesquisarPessoa.pessoaVisualizar }" />
                        </p:commandButton>
                    </div>

                </div>            

                <p:fieldset legend="Dados" styleClass="column12"
                            rendered="#{ managerPesquisarPessoa.pessoaVisualizar.tipoPessoa eq 'FISICA' }">
                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Nacionalidade:" />
                        </div>
                        <div class="column10 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.nacionalidade.nome }" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Nome:" />
                        </div>
                        <div class="column10 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.nome }" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="CPF:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.adicionarMascaraCPF(managerPesquisarPessoa.pessoaVisualizar.cpf) }" />
                        </div>                        

                        <div class="column2 bold"
                             style="#{ managerCriarPessoa.pessoa.nacionalidade eq 'BRASILEIRO' ? 'display: block' : 'display: none' }">
                            <p:outputLabel value="RG:" />
                        </div>
                        <div class="column3 text"
                             style="#{ managerCriarPessoa.pessoa.nacionalidade eq 'BRASILEIRO' ? 'display: block' : 'display: none' }">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.rg }" />
                        </div>

                        <div class="column2 bold"
                             style="#{ managerCriarPessoa.pessoa.nacionalidade eq 'ESTRANGEIRO' ? 'display: block' : 'display: none' }">
                            <p:outputLabel value="RNE:" />
                        </div>
                        <div class="column3 text"
                             style="#{ managerCriarPessoa.pessoa.nacionalidade eq 'ESTRANGEIRO' ? 'display: block' : 'display: none' }">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.rne }" />
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Data de Nascimento:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.dataNascimento }">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </p:outputLabel>
                        </div>                        

                        <div class="column2 bold">
                            <p:outputLabel value="Estado Civil:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.estadoCivil.nome }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Sexo:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.sexo.nome }" />
                        </div>

                        <div class="column2 bold">
                            <p:outputLabel value="Profissão:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.profissao }" />
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Email:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.email }" />
                        </div>
                    </div>

                </p:fieldset>

                <p:fieldset legend="Dados" styleClass="column12"
                            rendered="#{managerPesquisarPessoa.pessoaVisualizar.tipoPessoa eq 'JURIDICA'}">
                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Nome Fantasia:" />
                        </div>
                        <div class="column10 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.nome }" />                             
                        </div>
                    </div>

                    <div class="row">    
                        <div class="column2 bold">
                            <p:outputLabel value="Razão Social:" />
                        </div>
                        <div class="column10 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.razaoSocial }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="CNPJ:" />
                        </div>
                        <div class="column5 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.adicionarMascaraCNPJ(managerPesquisarPessoa.pessoaVisualizar.cnpj) }" />
                        </div>
                    </div>                        
                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Responsável:" />
                        </div>
                        <div class="column5 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.responsavel }" />
                        </div>
                        <div class="column1 bold">
                            <p:outputLabel value="Email:" />
                        </div>
                        <div class="column4 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.email }" />
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset legend="Telefones">

                    <p:dataTable id="telefoneDataTable" value="#{ managerCriarPessoa.pessoa.telefones }" var="telefone"
                                 rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum telefone adicionado">

                        <p:column headerText="Tipo" width="35%">
                            <h:outputText value="#{ telefone.tipoTelefone.nome }" />
                        </p:column>
                        <p:column headerText="DDD" width="25%">
                            <h:outputText value="#{ telefone.ddd }" />
                        </p:column>
                        <p:column headerText="Número" width="35%">
                            <h:outputText value="#{ telefone.numero }" />
                        </p:column>
                    </p:dataTable>

                </p:fieldset>                

                <p:fieldset legend="Endereço" styleClass="column12" >

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Tipo do endereço:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.endereco.tipo.nome }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Tipo do logradouro:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.endereco.tipoLogradouro.nome }" />
                        </div>

                        <div class="column2 bold">
                            <p:outputLabel value="Logradouro:" />
                        </div>
                        <div class="column5 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.endereco.logradouro }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Número:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.endereco.numero }" />
                        </div>

                        <div class="column2 bold">
                            <p:outputLabel value="Localidade:" />
                        </div>
                        <div class="column5 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.endereco.localidade }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Bairro:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.endereco.bairro.nome }" />
                        </div>

                        <div class="column2 bold">
                            <p:outputLabel value="CEP:" />
                        </div>
                        <div class="column5 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.endereco.cep != '' ? managerPesquisarPessoa.adicionarMascaraCEP(managerPesquisarPessoa.pessoaVisualizar.endereco.cep) : '' }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Cidade:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerPesquisarPessoa.pessoaVisualizar.endereco.cidade.nome }" />
                        </div>
                    </div>

                </p:fieldset>

                <p:fieldset legend="Dados Bancários" id="dadosBancariosFieldset">

                    <p:dataTable id="contabancariatable" var="item"
                                 value="#{ managerPesquisarPessoa.contasBancarias }"
                                 emptyMessage="Nenhum registro" rowIndexVar="idconta">

                        <p:column headerText="Banco" width="45%">
                            <h:outputText value="#{item.banco.nome}"/>
                        </p:column>

                        <p:column headerText="Conta" width="50%">
                            <h:outputText value="Conta #{ item.tipoContaBancaria.nome }"/><br/>
                            <h:outputText value="Agência: #{ item.agencia }"/><br/>
                            <h:outputText value="Conta: #{ item.conta }"/><br/>
                            <h:outputText value="Operação: #{ item.operacao }"/>
                        </p:column>

                    </p:dataTable>

                </p:fieldset>

                <p:dialog header="Deseja realmente excluir?" widgetVar="deletarClienteDialog" modal="true"
                          closable="false" resizable="false" draggable="false" >
                    <div class="commandDialog">
                        <p:commandButton value="Sim"
                                         icon="ui-icon-check" actionListener="#{ managerPesquisarPessoa.deletar() }" />
                        <p:commandButton value="Não" icon="ui-icon-close" oncomplete="deletarClienteDialog.hide()" />
                    </div>
                </p:dialog>                

            </h:form>

            <script>
                $(document).ready(function() {
                    setSelectedMenu('#cliente');
                });
            </script>            

        </ui:define>
    </ui:composition>

</html>
